<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .input-val {
            width: 200px;
            height: 32px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
        #canvas {
            vertical-align: middle;
            box-sizing: border-box;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .btn {
            display: block;
            margin-top: 20px;
            height: 32px;
            width: 100px;
            font-size: 16px;
            color: #fff;
            background-color: #457adb;
            border: none;
            border-radius: 50px;
        }
    </style>

    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="../angularjs/pagination.css">

    <link rel="stylesheet" href="../layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="../bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <!--<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>-->
    <!--<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>-->

    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>

    <script src="//unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>
    <!--6.引入AngularJS分布的JS框架-->
    <script src="../angularjs/pagination.js"></script>

    <script src="../layer/layer.js"></script>

    <script src="../js/mycode.js" ></script>

</head>
<body ng-app="regtrApp"    ng-controller="regtrCtrl">

<div>
    <ol class="breadcrumb" style="margin-top: 0px;margin-bottom: 0;">
        <li><a >Home</a></li>
        <li><a >银行</a></li>
        <li><a href="index.html">返回首页</a></li>
    </ol>
</div>
<div class="" style="width: 100%">

    <div class="panel panel-primary">

        <div style="text-align: center">
            <h1>跨服务汇款</h1>

        </div>

        <div class="panel-body">
            <div class="col-md-9 col-md-offset-1">
                <form  >

                    <div class="form-group">
                        <div class="form-horizontal">
                            <label for="payeeName" class="control-label col-md-2">收款人姓名</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="payeeName" id="payeeName" ng-model="form.payeeName" class="form-control" placeholder="请输入收款人姓名" maxlength="30"
                                       type="text"/><span id="yhk2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="payeeAccount" class="control-label col-md-2">收款人卡号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="payeeAccount" id="payeeAccount"  ng-model="form.payeeAccount" class="form-control" placeholder="请输入收款人卡号" maxlength="30"
                                       type="text"/><span id="sfz2"></span>
                            </div>

                        </div><br>
                        <div class="form-horizontal">
                            <label for="yh" class="control-label col-md-2">收款银行</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="yh" id="yh" ng-model="form.yh"  class="form-control" disabled maxlength="30"
                                       type="text"/><span id="sjh2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="payerAccount" class="control-label col-md-2">付款卡号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="payerAccount" id="payerAccount"  ng-model="form.payerAccount" class="form-control" placeholder="请输入付款卡号" maxlength="30"
                                       type="text"><span id="sjyzm2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="tradingAmount" class="control-label col-md-2">汇款金额</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="tradingAmount" id="tradingAmount"  ng-model="form.tradingAmount" class="form-control" placeholder="请输入汇款金额" maxlength="8"
                                   type="text"><span id="hkje"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="sj" class="control-label col-md-2">汇款时间</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <select name="sj" id="sj" class="form-control">
                                    <option name="timer" value="1">实时到账</option>
                                    <option name="timer" value="2">普通到账</option>
                                    <option name="timer" value="3">次日到账</option>

                                </select>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="comment" class="control-label col-md-2">备注</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="comment" id="comment"  ng-model="form.comment" class="form-control" placeholder="请输入交易备注" maxlength="30"
                                       type="text"><span id="comment2"></span>
                            </div>
                        </div>

                        <br>

                        <div class="form-horizontal">
                            <label for="yzm" class="control-label col-md-2">验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="text"id="yzm" value="" class="form-control" placeholder="请输入验证码（不区分大小写）" class="input-val"  style="width: 83%">&nbsp;&nbsp;&nbsp;
                                <canvas id="canvas" width="100" height="30"></canvas><span id="yzm2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="phone" class="control-label col-md-2">手机号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="phone" id="phone" ng-model="form.phone" class="form-control" maxlength="30"
                                       style="width: 80%" type="text"><span id="phone2"></span>&nbsp;&nbsp;&nbsp;
                                <input class="form-control" id="sjh" style="width: 16%;margin-left: 17px;color: white;background-color: #40AFFE" value="发送" type="button">
                            </div>

                        </div>
                        <br>
                        <div class="form-horizontal">
                            <label for="phoneCode" class="control-label col-md-2">手机验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="phoneCode" id="phoneCode" ng-model="form.phoneCode" class="form-control"
                                       placeholder="请输入手机验证码" maxlength="30"
                                       type="password"><span id="phoneCode2"></span>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <div class="form-group">
                                <input class="btn btn-primary col-sm-offset-2 col-md-6" id="submit"   value="确认" type="button">
                            </div>
                            <div class="form-group">
                                <a class="btn btn-warning col-sm-offset-2 col-md-2" id="submit1"
                                 href="index.html"  type="button">取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="panel-footer text-right">
            跨服务汇款
        </div>

    </div>

</div>

<script>
    layerindex=-1;
    var app = angular.module('regtrApp',['pagination']);    //定义一个模块； cityApp

    app.controller("regtrCtrl",function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list.action
        $scope.id=0;

        $scope.form={
            payeeAccount:"",
            yh:"",
            tradingAmount:"",

            payerAccount:"",
            comment:""//备注
        }
        var sessionStorage = window.sessionStorage;


        $http.post('http://localhost:12000/tran/ip').then(function (data) {  //正确请求成功时处理
            console.log(data)
            if (data.data.code == 403) {
                window.location.href = "/login.html";
            }
        }).catch(function (result) { //捕捉错误处理
            console.info(result);
        });

        //转账
        $scope.pay=function () {
            var sj = $('#sj option:selected').val();
            console.log("sj---"+sj)

            //提交转账请求
            $http.post("http://localhost:12000/tran/transfer/regtran?payerAccount="+$scope.form.payerAccount+"&payeeAccount="+$scope.form.payeeAccount+"&tradingAmount="+$scope.form.tradingAmount).then(function (data) {  //正确请求成功时处理

                console.log(data);

                if(data.data.code==200){
                    layer.close(layerindex);
                    layer.msg(data.data.msg,{icon:6,title:"系统提示："});
                    alert(data.data.msg);
                }

                window.location.href="/index.html";
            }).catch(function (result) { //捕捉错误处理
                console.info(result);
                alert(result.data.Message);
            });

        }


        //查询银行
        $("#payeeAccount").change(function () {
            var val = $("#payeeAccount").val();
            var pateen = $("#payeeName").val();

            if(pateen==""){
                $("#payeeName").focus();
                $("#payeeName").css("border", "2px red solid");
                $("#submit").attr("disabled", true);
            }else{
                $("#payeeName").blur();
                $("#payeeName").css("border", "1px green solid");
                $("#submit").attr("disabled", false);
            }

            if(val==""){
                $("#payeeAccount").focus();
                $("#payeeAccount").css("border", "2px red solid");
                $("#submit").attr("disabled", true);
            }else {
                $("#payeeAccount").blur();
                $("#payeeAccount").css("border", "1px green solid");
                $("#submit").attr("disabled", false);
                $http.post('http://127.0.0.1:12000/tran/account', $scope.form.payeeAccount).then(function (data) {  //正确请求成功时处理
                    console.log(data);
                    if (data.data.code == 200) {
                        $scope.form.yh = data.data.data;
                    }
                    if (data.data.code == 403) {
                        window.location.href = "/login.html";
                    }

                })
            }
        })


        //付款账户
        $("#payerAccount").change(function () {

            $http.post('http://127.0.0.1:12000/tran/state', $scope.form.payerAccount).then(function (data) {  //正确请求成功时处理
                console.log(data);

                if(data.data.data!='1'){
                    $("#payerAccount").focus();
                    $("#payerAccount").css("border", "2px red solid");
                    $("#submit").attr("disabled",true);
                    alert("该银行卡已冻结")
                }else{
                    $("#payerAccount").blur();
                    $("#payerAccount").css("border", "1px green solid");
                    $("#submit").attr("disabled",false);
                }

            })

        });



        //判断余额
        $("#tradingAmount").change(function () {
            var val = $("#tradingAmount").val();

            //alert("余额判断--")
            $http.post('http://localhost:12000/tran/amount',
                $.param({amount: $scope.form.tradingAmount, account: $scope.form.payerAccount}),
                {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}}
                ).success(function (data) {  //正确请求成功时处理
                console.log(data);
                if(data.code!=200){
                    $("#hkje").html("余额不足");
                    $("#tradingAmount").focus();
                    $("#hkje").css("border", "2px red solid");

                    $("#submit").attr("disabled",true);
                }else{
                    $("#hkje").html("");
                    $("#hkje").css("border", "none");
                    $("#submit").attr("disabled",false);
                }
            })
        })


        //手机号验证
        $("#sjh").click(function () {
            var myphone=$("#phone").val();
            if(myphone==""){
                $("#phone").css("border", "2px red solid");
            }else{
                $http.get('http://localhost:12000/tran/phone?phone='+myphone).success(function (data) {  //正确请求成功时处理
                    console.log(data);
                    $("#phone").css("border", "1px green solid");
                })
            }
        });

        //手机验证码
        $("#phoneCode").change(function () {
            var code=$("#phoneCode").val();
            var myphone=$("#phone").val();

            if(myphone==""){
                alert("请输入手机号")
            }else{
                $http.get('http://localhost:12000/tran/smscode?phone='+myphone+"&code="+code).success(function (data) {  //正确请求成功时处理
                    console.log(data);
                    if(data.code==200){
                        $("#phoneCode").blur();
                        $("#phoneCode").css("border", "1px green solid");
                    }else{
                        layer.close(layerindex);
                        layer.msg(data.msg,{icon:6,title:"系统提示："});
                        $("#phoneCode").val("");
                        $("#phoneCode").focus();

                    }
                })
            }
        })



    });

    $(function () {
        $('#submit').click( function () {
            var s2 =$("#payeeAccount").val();
            var s3 =$("#tradingAmount").val();
            var s5 =$("#payerAccount").val();

            if(s2==""||s3==""||s5==""){
                alert("账户信息未填写，请填写！")
            }else {

                $('#myModal').modal('show')
            }
        })
        $('#b2').click( function () {
            $('#myModal').modal('hide')
        })


        //验证码
        var show_num = [];
        draw(show_num);
        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $("#yzm").change(function () {
            var val = $("#yzm").val().toLowerCase();

            var num = show_num.join("");
            if (val == '') {
                alert('请输入验证码！');
            } else if (val == num) {
                $("#yzm").css("border", "1px green solid");
                //$(".input-val").val('');
                // draw(show_num);
                $("#submit").attr("disabled",false);
                $("#yzm").blur();
            } else {
                $("#yzm").css("border", "2px red solid");
                $(".input-val").val('');
                // draw(show_num);
                $("#submit").attr("disabled",true);
                $("#yzm").focus();
            }

        })

    });
</script>


<!-- 按钮触发模态框 -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">单笔汇款转账</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center;color: red;"><h2>请确认进行账户转账操作吗？</h2></div>
                <div class="panel-body">
                    <div class="col-md-9 col-md-offset-1">
                        <div class="form-group">
                            <div class="form-group">
                                <a class="btn btn-danger col-sm-offset-2 col-md-4" id="b1"
                                    ng-click="pay()" value=""data-toggle="modal" data-target="#myModal" type="submit" >确认</a>
                            </div>
                            <div class="form-group">
                                <a class="btn btn-warning col-sm-offset-2 col-md-4" id="b2"
                                   href="" type="button" data-dismiss="modal">取消</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>